<template>
  <!-- 底部Tab标签栏 -->
  <van-tabbar class="tab" v-model="active">
    <van-tabbar-item to="/">
      <template #icon="{ active }">
        <img :src="active ? homeActive : homeInactive" />
      </template>
      <span style="color: #000; font-size: 13px; font-weight: normal">首页</span>
    </van-tabbar-item>

    <van-tabbar-item to="/shop">
      <template #icon="{ active }">
        <img :src="active ? shopActive : shopInactive" />
      </template>
      <span style="color: #000; font-size: 13px; font-weight: normal">商城</span>
    </van-tabbar-item>

    <van-tabbar-item to="/book">
      <template #icon="{ active }">
        <img :src="active ? bookActive : bookInactive" />
      </template>
      <span style="color: #000; font-size: 13px; font-weight: normal">书架</span>
    </van-tabbar-item>

    <van-tabbar-item to="/user">
      <template #icon="{ active }">
        <img :src="active ? myActive : myInactive" />
      </template>
      <span style="color: #000; font-size: 13px; font-weight: normal">我的</span>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
// 导入图片
import homeInactive from '@/assets/images/i-home.png'
import homeActive from '@/assets/images/i-home-on.png'
import shopInactive from '@/assets/images/i-shop.png'
import shopActive from '@/assets/images/i-shop-on.png'
import bookInactive from '@/assets/images/i-book.png'
import bookActive from '@/assets/images/i-book-on.png'
import myInactive from '@/assets/images/i-my.png'
import myActive from '@/assets/images/i-my-on.png'

const route = useRoute()
const routeMap = {
  '/': 0,
  '/shop': 1,
  '/book': 2,
  '/user': 3,
}

const active = computed(() => {
  return routeMap[route.path] || 0
})
</script>

<style lang="less" scoped>
:deep(.van-tabbar) {
  background-color: #fff !important;
}

:deep(.van-tabbar-item) {
  color: #000 !important;
  font-size: 13px;
  font-weight: normal;
}

:deep(.van-tabbar-item--active) {
  background-color: transparent;
  font-weight: normal;
  color: #4f95fc !important;
  font-size: 13px !important;
}
</style>
